import { colors, spacing, typography } from "app/theme"
import { StyleSheet } from "react-native"
import { scale } from "react-native-size-matters"

export const styles = StyleSheet.create({
  infoContainer: {
    marginVertical: 24,
    borderTopRightRadius: 10,
    borderBottomRightRadius: 10,
    backgroundColor: colors.lightGrey2,
    width: scale(220),
    paddingLeft: 20,
    height: 44,
    justifyContent: "center",
  },
  infoText: {
    fontSize: 14,
    fontFamily: typography.fonts.spaceGrotesk.bold,
    color: colors.black,
  },
  label: { marginVertical: 5, color: colors.grey, fontSize: scale(14) },
  costLabel: { marginVertical: 5, color: colors.grey, fontWeight: "800", fontSize: scale(15) },
  weeklyReportInActive: {
    borderColor: colors.border,
    borderWidth: StyleSheet.hairlineWidth * 2,
    borderRadius: 4,
    backgroundColor: colors.white,
    marginTop: scale(15),
    justifyContent: "center",
    paddingVertical: scale(10),
  },
  weeklyReportActive: {
    borderColor: colors.border,
    borderWidth: StyleSheet.hairlineWidth * 2,
    borderRadius: 9,
    backgroundColor: colors.white,
    marginTop: scale(15),
    paddingTop: 15,
    overflow: "hidden",
  },
  container: {
    height: 48,
    borderColor: colors.border,
    borderWidth: StyleSheet.hairlineWidth * 2,
    borderRadius: 4,
    backgroundColor: colors.white,
    paddingTop: 15,
  },
  checkBoxContainer: { flexDirection: "row", alignItems: "center" },
  checkBoxText: { marginLeft: scale(10), color: colors.black },
  middleView: {
    flexDirection: "row",
    justifyContent: "space-between",
    paddingHorizontal: scale(10),
    marginTop: scale(5),
    alignItems: "center",
  },
  lowerView: {
    flexDirection: "row",
    paddingHorizontal: scale(10),
    marginVertical: scale(15),
    alignItems: "center",
  },
  repeatView: {
    borderColor: colors.border,
    borderWidth: StyleSheet.hairlineWidth * 2,
    borderRadius: 30,
    backgroundColor: colors.white,
    justifyContent: "center",
    alignItems: "center",
    marginLeft: scale(18),
    width: scale(260),
    minHeight: 32,
  },
  repeatView2: {
    height: 22,
    borderColor: colors.border,
    borderWidth: StyleSheet.hairlineWidth * 2,
    borderRadius: 30,
    backgroundColor: colors.white,
    justifyContent: "center",
    alignItems: "center",
    width: scale(50),
    alignSelf: "center",
    paddingHorizontal: scale(2),
  },
  item: {
    height: 22,
    backgroundColor: colors.white,
    justifyContent: "center",
    alignItems: "center",
    width: scale(100),
    alignSelf: "center",
    paddingHorizontal: scale(2),
  },
  locationView: {
    paddingBottom: scale(24),
    paddingTop: scale(5),
    paddingLeft: scale(5),
    backgroundColor: colors.white,
    borderWidth: StyleSheet.hairlineWidth,
    borderBottomColor: colors.border,
    borderLeftColor: colors.border,
    borderRightColor: colors.border,
    borderTopWidth: 0,
    borderBottomLeftRadius: 5,
    borderBottomRightRadius: 5,
  },
  locationTitle: { color: colors.grey, marginVertical: scale(3) },
  locationItem: { marginLeft: scale(10), marginTop: scale(2) },
  activeWeekView: {
    height: scale(30),
    width: scale(30),
    alignItems: "center",
    justifyContent: "center",
    borderRadius: 20,
    borderWidth: StyleSheet.hairlineWidth * 5,
  },
  activeTextView: {
    fontWeight: "600",
    color: colors.black,
  },
  placeholderStyle: {
    marginLeft: scale(12),
    color: colors?.black,
    fontSize: scale(9),
  },
  containerStyle: { backgroundColor: "red", padding: 0, margin: 0 },
  btn: {
    minHeight: 40,
    borderRadius: 60,
    justifyContent: "center",
    alignItems: "center",
    flexDirection: "row",
    paddingVertical: spacing.sm,
    paddingHorizontal: spacing.sm,
    overflow: "hidden",
    backgroundColor: colors.green,
  },
  weekText: {
    fontSize: scale(12),
    color: colors.black,
  },
  weekText1: {
    fontSize: scale(10),
    color: colors.black,
  },
  overlay: {
    ...StyleSheet.absoluteFillObject,
    backgroundColor: "rgba(0, 0, 0, 0.5)",
    justifyContent: "center",
    alignItems: "center",
  },
  roomCost: {
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-between",
  },
  roomCostText: { color: "black", textAlign: "center", paddingHorizontal: scale(3) },
  roomCostView: {
    backgroundColor: colors.lightGrey2,
    width: scale(60),
    borderRadius: scale(10),
    flexDirection: "row",
    paddingHorizontal: scale(5),
  },
})
